<template>
  <view>
    <!-- 目录导航 -->
    <view class="page-label-menu">
      <template v-if="selectHelpMenu.isMenu == 1">
        <!-- 帮助目录 -->
        <span class="themeColor" @click="cancel">目录</span>
        <!-- 父级目录 -->
        <template v-for="(item,index) in selectHelpMenu.parentMenus">
          {{ ' > ' }}
          <span class="themeColor" @click="handleHelpMenu(item)">{{ item.name }}</span>
        </template>
        <!-- 当前目录 -->
        {{ ' > ' }}<span>{{ selectHelpMenu.name }}</span>
      </template>
      <template v-else>
        <!-- 帮助文档 -->
        <span class="themeColor" @click="cancel">目录</span>
        <!-- 父级目录 -->
        <template v-for="(item,index) in selectHelpMenu.parentMenus">
          {{ ' > ' }}
          <span class="themeColor" @click="handleHelpMenu(item)">{{ item.name }}</span>
        </template>
      </template>
    </view>
    <!-- 文章内容 -->
    <view v-if="selectHelpMenu.isMenu == 0" class="content-block">
      <!-- 当前目录名称 -->
      <h1 class="page-label-content-title"> {{ selectHelpMenu.name }}</h1>
      <view class="page-label-content-time">
        {{ '更新时间：' + (!!selectHelpContent.updateTime ? selectHelpContent.updateTime : '无') }}
      </view>
      <!-- 帮助文档html -->
      <view v-if="!!selectHelpContent.content">
        <view class="content-html" v-html="selectHelpContent.content"></view>
        <!-- 有无帮助 -->
        <view v-if="!!selectHelpContent.content">
          <view class="detail-helpful" v-if="showHelpMsg">
            <view class="flex_between">
              <uni-tag
                  style="margin-right: 20rpx;padding-right: 30rpx;padding-left: 30rpx;"
                  :circle="true"
                  text="有帮助"
                  type="primary"
                  @click="addHelpfulNum"
              ></uni-tag>
              <uni-tag
                  style="padding-right: 30rpx;padding-left: 30rpx;"
                  :circle="true"
                  text="无帮助"
                  type="primary"
                  @click="addUnHelpfulNum"
              ></uni-tag>
            </view>
          </view>
          <view class="detail-helpful" v-else>
            <view>
              <i class="iconfont" style="font-size: 18px;color: #00a660;">&#xe657;</i>
              <span style="font-size: 16px;color: #3d3d3d;margin-left: 5px;">提交成功！非常感谢您的反馈，我们会继续努力做到更好！</span>
            </view>
          </view>
          <view style="margin: 20rpx 10rpx 40rpx 10rpx; padding-bottom: 20rpx ; border-bottom: 1px dashed #e9e9e9;">
            <span style="font-size:14px;color: #666666;">如未解决您的问题，请联系在线客服！</span>
            <uni-tag text="在线客服" type="primary" @click="toWechat"></uni-tag>
          </view>
        </view>
      </view>
      <!-- 空试图 -->
      <view v-else style="width: 100%;height: 600rpx;position: relative">
        <luanqingEmpty  :show="true" text="暂无内容"/>
      </view>
      <view class="content-foot">
        <view class="foot-menu">
          <span>上一篇：</span>
          <span v-if="preHtmlContent != null" @click="handleHelpMenu(preHtmlContent)">
                  {{ preHtmlContent.label }}
              </span>
          <span v-else>暂无</span>
        </view>
        <view class="foot-menu" style="margin: 15rpx 0 30rpx 0;">
          <span>下一篇：</span>
          <span v-if="nextHtmlContent != null" @click="handleHelpMenu(nextHtmlContent)">
                  {{ nextHtmlContent.label }}
              </span>
          <span v-else>暂无</span>
        </view>
      </view>
    </view>
    <!-- 目录列表 -->
    <view v-else class="content-block">
      <!-- 当前目录子集列表 -->
      <view class="page-label-menu-item" v-for="(item,index) in helpMenus" @click="handleHelpMenu(item)">
        <div class="cover">
          <img v-if="item.isMenu == 0" src="../../../static/images/card-doc-icon.png"
               style="width: 65rpx;height: 65rpx;">
          <img v-else src="../../../static/images/card-folder-icon.png" style="width: 70rpx;height: 70rpx;">
        </div>
        <view class="info">
          <view class="title-line">
            <view class="catalogName">{{ item.name }}</view>
          </view>
          <view class="meta"> 发布日期 {{ item.createTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import luanqingEmpty from '@/components/luanqing-empty/luanqing-empty';
import {getHelpMenu, helpMenuChild, listHelpMenuTree} from "../../../api/ec/common/helpMenu";
import {addHelpfulNum, addUnHelpfulNum, getHelpContentByMenuId} from "../../../api/ec/common/helpContent";

export default {
  components: {luanqingEmpty},
  data() {
    return {
      // 目录id
      id: null,
      // 当前选中菜单详细数据
      selectHelpMenu: {},
      // 帮助文档详情
      selectHelpContent: {},
      // 帮助目录
      helpMenus: [],
      // 是否显示提交成功
      showHelpMsg: true,
      // 目录树中所有帮助文档数组
      helpContentIds: [],
      helpContentDatas: [],
      // 上一篇
      preHtmlContent: null,
      // 下一篇
      nextHtmlContent: null,
    }
  },
  onLoad(option) {
    this.id = option.id;
  },
  created() {
    this.getHelpMenu();
    this.getHelpMenuTree();
  },
  methods: {
    /**返回上级页面 */
    cancel() {
      uni.navigateBack({delta: 1});
    },
    /**获取目录详情 */
    getHelpMenu() {
      if (!!this.id) {
        this.$modal.loading();
        getHelpMenu(this.id).then(response => {
          uni.hideLoading()
          this.selectHelpMenu = response.data;
          if (this.selectHelpMenu.isMenu == 0) {
            this.getHelp();
            this.toSetBothSidesView();
          } else {
            this.getHelpMenuChild();
          }
        }).catch(() => {
          uni.hideLoading()
        });
      }
    },
    /** 查询文章详情 */
    getHelp() {
      this.$modal.loading();
      getHelpContentByMenuId(this.id).then(res => {
        uni.hideLoading()
        if (res.data != null) {
          this.selectHelpContent = res.data;
        } else {
          this.selectHelpContent = {};
        }
      }).catch(() => {
        uni.hideLoading()
      });
    },
    /** 查询目录子集 */
    getHelpMenuChild() {
      this.$modal.loading();
      let query = {parentId: this.id};
      helpMenuChild(query).then(res => {
        uni.hideLoading()
        if (res.data != null) {
          this.helpMenus = res.data;
        } else {
          this.helpMenus = []
        }
      }).catch(() => {
        uni.hideLoading()
      });
    },
    /**帮助目录点击 */
    handleHelpMenu(item) {
      this.id = item.id;
      this.showHelpMsg = true;
      this.getHelpMenu();
    },
    /**有帮助数量+1 */
    addHelpfulNum() {
      this.$modal.loading();
      addHelpfulNum(this.selectHelpContent.id).then(response => {
        uni.hideLoading()
        this.showHelpMsg = false
      }).catch(() => {
        uni.hideLoading()
      });
    },
    /**无帮助数量+1 */
    addUnHelpfulNum() {
      this.$modal.loading();
      addUnHelpfulNum(this.selectHelpContent.id).then(response => {
        uni.hideLoading()
        this.showHelpMsg = false
      }).catch(() => {
        uni.hideLoading()
      });
    },
    /** 获取帮助中心的树结构 */
    getHelpMenuTree() {
      listHelpMenuTree().then(response => {
        let menuOptions = response.data;
        for (const item of menuOptions) {
          this.getAllChilds(item);
        }
        this.toSetBothSidesView();
      });
    },
    /** 解析所有子节点 */
    getAllChilds(obj) {
      if (obj.isMenu == 0) {
        this.helpContentIds.push(obj.id);
        this.helpContentDatas.push(obj);
      } else {
        if (obj.children != null) {
          for (const item of obj.children) {
            this.getAllChilds(item)
          }
        }
      }
    },
    /** 设置上一篇、下一篇 */
    toSetBothSidesView() {
      let index = this.helpContentIds.indexOf(parseInt(this.id));
      if (index > 0) {
        this.preHtmlContent = this.helpContentDatas[index - 1];
      } else {
        this.preHtmlContent = null;
      }
      if (index < this.helpContentDatas.length) {
        this.nextHtmlContent = this.helpContentDatas[index + 1];
      } else {
        this.nextHtmlContent = null;
      }
    },
    /** 打开微信客服 */
    toWechat() {
      window.open("about:blank").location.href = this.$wechatUrl;
    },
  }
}
</script>

<style scoped lang="scss">
page {
  background: $uni-bg-color;
}

.page-label-menu {
  color: #555;
  font-weight: 400;
  font-size: 26rpx;
  padding: 15rpx 25rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  background: #f5f5f5;
  width: 100%;
}

.content-block {
  text-align: center;
  padding: 20rpx;
}

.page-label-content-title {
  font-size: 30rpx;
  color: #333333;
  margin: 15rpx;
}

.page-label-content-time {
  font-size: 22rpx;
  color: #999;
  line-height: 20px;
  margin-bottom: 24rpx;
}

.content-html {
  text-align: left;

  ::v-deep img {
    max-width: 100%;
    height: auto;
  }
}

.detail-helpful {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  position: relative;
  padding: 16px;
  height: 60px;
  border-top: 1px dashed #e9e9e9;
  border-bottom: 1px dashed #e9e9e9;
}

.page-label-menu-item {
  margin: 15rpx;
  height: 130rpx;
  border-radius: 5px;
  background: #FFFFFF;
  box-sizing: border-box;
  border: 1px solid #cceddf;
  display: flex;
  flex-direction: row;
  text-align: left;

  .cover {
    width: 162rpx;
    min-width: 162rpx;
    border-radius: 5rpx 0 0 5rpx;
    background: #e6f6ef;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .info {
    margin: 20rpx;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .title-line {
    height: 0;
    flex-grow: 1;
  }

  .catalogName {
    font-size: 26rpx;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0em;
    color: #0e1421;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .meta {
    font-size: 20rpx;
    font-weight: 400;
    letter-spacing: 0em;
    color: #767676;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.content-foot {
  text-align: left;
}

.content-foot .foot-menu {
  font-size: 26rpx;
  color: #333;
}

</style>
